<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<style type="text/css">
    .calendar_click_able {cursor:pointer;}
    .k-scheduler-timezones .k-edit-form-container {
        width: 720px;
    }
    .k-picker-wrap .k-i-calendar{
        width:15px;
        margin:0;
    }
    .k-i-calendar {
        background-position: -32px -172px;
    }
    .k-i-clock{
        background-position:-32px -190px
    }
    .k-state-hover > * > .k-i-clock{
        background-position:-32px -190px
    }
    .k-edit-form-container .k-edit-buttons{
        height:30px;
        border-top-width: 0px;
        font-size: 10px;
        margin-right: 15px;
    }
    .k-scheduler-cancel{
        height:20px;
        width:auto;
        padding-top: 9px;
        margin-right: 9px;
        background-color: #bfbfbf;
    }
    .k-scheduler-update{
        height:20px;
        width:auto;
        padding-top: 9px;
        margin-right: 9px;
    }
    .k-button{
        padding-top: 9px;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 9px;
        margin-right: 9px;
    }
    .k-select span{
        width: 15px;
    }
    .k-link:not(.k-state-disabled):hover > .k-i-calendar,
    .k-state-hover > .k-i-calendar,
    .k-state-hover > * > .k-i-calendar,
    .k-button:hover .k-i-calendar,
    .k-textbox:hover .k-i-calendar,
    .k-button:active .k-i-calendar{
        background-position: -48px -172px;
    }
    .calendar_panel_top{color:white; text-align: center; background-color: #005566; line-height: 20px;}
    #calendar_min_panel{width: 256px; height: 100%;overflow: hidden;}
    #calendar_max_panel{width: 768px; height: 100%; overflow: hidden;}

    /*for min calendar*/
    #calendar_min_calendar_div,
    #calendar_min_calendar_div .k-content,
    #calendar_min_calendar_div .k-header,
    #calendar_min_calendar_div th,
    #calendar_min_calendar_div .k-link,
    #calendar_min_calendar_div .k-state-hover,
    #calendar_min_calendar_div .k-state-selected,
    #calendar_min_calendar_div .k-state-focused {
        background: transparent;
        border-color: transparent;
        color: #ffffff;
        box-shadow: none;
    }
    #calendar_min_calendar_div .k-content .k-state-hover,
    #calendar_min_calendar_div .k-content .k-state-focused {
        font-size: 14px;
        font-weight: bold;
    }
    #calendar_min_calendar_div .k-state-selected, #calendar_min_calendar_div .k-state-selected.k-state-focused {
        font-size: 14px;
        font-weight: bold;
    }
    #calendar_min_calendar_div .k-state-selected a, #calendar_min_calendar_div .k-state-selected.k-state-focused a{
        background-color: #ffffff;
        color: #006A80;
    }
    #calendar_min_calendar_div .k-content .k-link {
        padding: 0;
        min-height: 20px;
        line-height: 20px;
    }
    #calendar_min_calendar_div th {
        padding-top: 0px;
        color: #ffffff;
    }
    #calendar_min_calendar_div td.k-other-month .k-link {
        color: #aaaaaa;
    }
    #calendar_min_calendar_div th,
    #calendar_min_calendar_div td {
        text-align: center;
    }
    #calendar_min_calendar_div .top1 {
        color: #ff0000;
    }
    #calendar_min_calendar_div .top2 {
        color: #ff4500;
    }
    #calendar_min_calendar_div .top3 {
        color: #ff8c00;
    }
    #calendar_min_calendar_div .top4 {
        color: #ffa500;
    }
    #calendar_min_calendar_div .top5 {
        color: #ffff00;
    }
    /* Template Days */
    .exhibition, .party, .cocktail {
        width: 20px;
        height: 20px;
        margin: auto;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 50%;
        line-height: 20px;
    }
    .exhibition {
        background-color: #fff;
        color: #000;
    }
    .party {
        background-color: #70c114;
    }
    .cocktail {
        background-color: #00a1e8;
    }

    #calendar_min_WorkVolume_1 {
        float: left; width: 103px; height: 2px;margin-left: 25px;
        /* IE10 Consumer Preview */
        background-image: -ms-linear-gradient(left, #FCD549 0%, #DD6F28 100%);
        /* Mozilla Firefox */
        background-image: -moz-linear-gradient(left, #FCD549 0%, #DD6F28 100%);
        /* Opera */
        background-image: -o-linear-gradient(left, #FCD549 0%, #DD6F28 100%);
        /* Webkit (Safari/Chrome 10) */
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FCD549), color-stop(1, #DD6F28));
        /* Webkit (Chrome 11+) */
        background-image: -webkit-linear-gradient(left, #FCD549 0%, #DD6F28 100%);
        /* W3C Markup, IE10 Release Preview */
        background-image: linear-gradient(to right, #FCD549 0%, #DD6F28 100%);
    }
    #calendar_min_WorkVolume_2 {
        float: left; width: 103px; height: 2px;margin-left: 0px;
        /* IE10 Consumer Preview */
        background-image: -ms-linear-gradient(left, #DD6F28 0%, #BE0807 100%);
        /* Mozilla Firefox */
        background-image: -moz-linear-gradient(left, #DD6F28 0%, #BE0807 100%);
        /* Opera */
        background-image: -o-linear-gradient(left, #DD6F28 0%, #BE0807 100%);
        /* Webkit (Safari/Chrome 10) */
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #DD6F28), color-stop(1, #BE0807));
        /* Webkit (Chrome 11+) */
        background-image: -webkit-linear-gradient(left, #DD6F28 0%, #BE0807 100%);
        /* W3C Markup, IE10 Release Preview */
        background-image: linear-gradient(to right, #DD6F28 0%, #BE0807 100%);
    }

    /*for max panel min calendar*/
    /*for calendar*/
    #calendar_max_calendar_div,
    #calendar_max_calendar_div .k-content,
    #calendar_max_calendar_div .k-header,
    #calendar_max_calendar_div th,
    #calendar_max_calendar_div .k-link,
    #calendar_max_calendar_div .k-state-hover,
    #calendar_max_calendar_div .k-state-selected,
    #calendar_max_calendar_div .k-state-focused {
        background: transparent;
        border-color: transparent;
        color: #ffffff;
        box-shadow: none;
        font-size: 10px;
    }
    #calendar_max_calendar_div .k-content .k-state-hover,
    #calendar_max_calendar_div .k-content .k-state-focused {
        font-size: 10px;
        font-weight: bold;
    }
    #calendar_max_calendar_div .k-state-selected, #calendar_max_calendar_div .k-state-selected.k-state-focused {
        font-size: 10px;
        font-weight: bold;
    }
    #calendar_max_calendar_div .k-state-selected a, #calendar_max_calendar_div .k-state-selected.k-state-focused a{
        background-color: #ffffff;
        color: #006A80;
    }
    #calendar_max_calendar_div .k-content .k-link {
        padding: 0;
        min-height: 10px;
        line-height: 10px;
    }
    #calendar_max_calendar_div th {
        padding: 0px;
        /*padding-top: 0px;*/
        color: #ffffff;
    }
    #calendar_max_calendar_div td.k-other-month .k-link {
        color: #aaaaaa;
    }
    /*for scheduler*/
    #calendar_max_schedule_div .k-scheduler-table .k-today, .k-today
    #calendar_max_schedule_div .k-scheduler-datecolumn, .k-today
    #calendar_max_schedule_div .k-scheduler-groupcolumn {
        background-color: transparent;
        background: transparent;
    }
    #calendar_max_schedule_div .k-scheduler-table .k-today, .k-today
    #calendar_max_schedule_div .k-scheduler-datecolumn, .k-today
    #calendar_max_schedule_div .k-scheduler-groupcolumn,
    #calendar_max_schedule_div .k-scheduler-times tr,
    #calendar_max_schedule_div .k-scheduler-times th,
    #calendar_max_schedule_div .k-scheduler-table td,
    #calendar_max_schedule_div .k-scheduler-header th,
    #calendar_max_schedule_div .k-scheduler-header-wrap,
    #calendar_max_schedule_div .k-scheduler-times ,
    #calendar_max_schedule_div .k-header{
        background-color: transparent;
        background: transparent;
    }
    #calendar_max_schedule_div .k-link:link,
    #calendar_max_schedule_div .k-link:visited,
    #calendar_max_schedule_div .k-nav-current.k-state-hover .k-link,
    #calendar_max_schedule_div .k-scheduler-toolbar > ul > li{
        color: #ffffff;
        background-color: transparent;
        background: transparent;
    }
    #calendar_max_schedule_div .k-scheduler-layout {
        color: #ffffff;
    }
    /*for mobile scheduler*/
    #calendar_panel div.km-pane-wrapper {
        float: right;
        height: 615px;
        width: 615px;
        position: relative;
    }

</style>


<script id="editor" type="text/x-kendo-template">
    <div style="font-size: 12px;padding-left: 15px">
        <p>
            <label style="width: 10%">Subject</label><label><input class="wp_ml_15" style="width: 88%" name="subject" /></label>
        </p>
        <p class="wp_mt_10">
            <label  style="width: 95px">Time</label>
            <label><input style="width:130px" class="wp_ml_26 k-input" data-role="datepicker" name="startdate" /></label>
            <label><input style="width:100px" data-role="timepicker" name="starttime" /></label>
            <label  style="width: 50px;text-align: center">to</label>
            <label><input style="width:100px" data-role="timepicker" name="endtime" /></label>
            <label><input style="width:130px" data-role="datepicker" name="enddate" /></label>
            <label><input class="wp_ml_5" style="width:10px;" type="checkbox"/></label>
            <label class="wp_ml_5">All Day Event</label>
        </p>
        <p class="wp_mt_10">
            <label style="width: 10%">Location</label><label><input class="wp_ml_10" style="width: 58%" name="location" /></label>
            <label style="width: 10%">Calender</label><label><input class="wp_ml_10" data-role="dropdownlist" style="width: 20%" name="calender" /></label>
        </p>
        <p>
            <label><input style="width:10px;" class="wp_mt_12" type="checkbox"/></label>
            <label style="margin-left: 10px">Reminder</label>
            <label><input class="wp_ml_5" data-role="dropdownlist" style="width: 20%" name="reminder" data-source="{data:['30 minutes', '1 hour','2 hours']}"/></label>
            <label style="width: 8%;margin-left: 10px">Recurrence</label>
            <label><input class="wp_ml_5" data-role="dropdownlist" style="width: 20%;" name="recurrence" data-source="{data:['Every Week', 'Every Weekend','Every Day']}"/></label>
            <label style="width: 8%;margin-left: 10px">Show as</label>
            <label><input class="wp_ml_5" data-role="dropdownlist" style="width: 20%" name="showas" data-source="{data:['busy', 'not busy']}"/></label>
        </p>
        <div id="calender_edit_kendo_editor_all_tools" class="wp_mt_10 wp_fz_12">
            <textarea id="calender_kendo_editor" class="wp_h_150"  style="width: 96.5%"></textarea>
        </div>
    </div>
</script>
<div class="calendar_panel wp_fz_12" id="calendar_panel">
    <div class="calendar_panel_top wp_h_20 wp_fz_14">
        Calendar
        <i id="calendar_panel_resize_icon" class="main_common_f_13_13 right wp_mr_3 wp_mt_2 calendar_click_able"></i>
    </div>
    <div id="calendar_min_panel">
        <div id="calendar_min_calendar_div" class="wp_w_210 wp_h_250 wp_ml_23"></div>
        <div id="calendar_min_WorkVolume" style="color: #ffffff;">
            <p class="wp_mb_10 wp_ml_25">Work Volume</p>
            <div id="calendar_min_WorkVolume_1"></div>
            <div id="calendar_min_WorkVolume_2"></div>
            <p class="left wp_mt_3 wp_ml_25">Low</p>
            <p class="left wp_mt_3 wp_ml_60">Middle</p>
            <p class="left wp_mt_3 wp_ml_60">High</p>
        </div>
        <table id="calendar_min_calendar_list"></table>
    </div>
    <div id="calendar_max_panel" style="display: none;">
        <p style="width: 45px; height: 18px;background-color: #FFAD46;color: #ffffff;text-align: center;">Create</p>
        <div id="calendar_max_calendar_div" class="wp_w_125 wp_h_170 wp_ml_20"></div>
        <div id="calendar_max_schedule_div" class="right wp_w_615 wp_h_615"></div>
    </div>
</div>

<script type="text/x-kendo-template" id="calendar_min_calendar_list_content">
</script>

<script id="slotTemplateForDayView" type="text/x-kendo-template">
    <div style="background-color: \#ff0000; height: 100%;">
        #var startTime = kendo.toString(start, 'HH:mm');#
        #var endTime = kendo.toString(end, 'HH:mm');#
        <p>#:startTime# - #:endTime#</p>
        <p>#:title#</p>
    </div>
</script>
<script src="js/calendar.main.js"></script>